<template>


  <div class="root-house-mng">
    <div class="root-house-mng-main">



      






      <!-- <a-button type="primary"  >
        <router-link to="/houseYhManager/houseManager">列表模式</router-link>
      </a-button> -->

      <Popover title="筛选" trigger="click" placement="rightTop">
        <template #content>

          
  <div class="title">
    <div style="height: 20px; width: 80%">
      <div style="width: 15%; float: left">
        <a-space direction="vertical" style="width: 80%; margin-left: 13px">
          <a-input-group compact>
            <a-cascader
              v-model:value="value18"
              style="width: 80%"
              :options="options1"
              expand-trigger="hover"
              placeholder="请选择行政区"
              changeOnSelect
              @change="getxzqcode"
            />
          </a-input-group>
        </a-space>
      </div>
      <div style="width: 10%; float: left; margin-top: 15px; margin-left: 20px">
        <a-form-item name="zczt" style="margin-bottom: 0px">
          <a-select v-model:value="zczt" placeholder="请选择自查状态">
            <a-select-option value="">请选择自查状态</a-select-option>
            <a-select-option value="已自查">已自查</a-select-option>
            <a-select-option value="未自查">未自查</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div style="width: 10%; float: left; margin-top: 15px; margin-left: 20px">
        <a-form-item name="zc_yhzt" style="margin-bottom: 0px">
          <a-select v-model:value="zc_yhzt" placeholder="请选择自查隐患状态">
            <a-select-option value="">请选择自查隐患状态</a-select-option>
            <a-select-option value="有隐患">已自查有隐患</a-select-option>
            <a-select-option value="无隐患">已自查无隐患</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div style="width: 10%; float: left; margin-top: 15px; margin-left: 20px">
        <a-form-item name="jczt" style="margin-bottom: 0px">
          <a-select v-model:value="jczt" placeholder="请选择检查状态">
            <a-select-option value="">请选择检查状态</a-select-option>
            <a-select-option value="已检查">已检查</a-select-option>
            <a-select-option value="未检查">未检查</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div style="width: 10%; float: left; margin-top: 15px; margin-left: 20px">
        <a-form-item name="jc_yhzt" style="margin-bottom: 0px">
          <a-select v-model:value="jc_yhzt" placeholder="请选择检查隐患状态">
            <a-select-option value="">请选择检查隐患状态</a-select-option>
            <a-select-option value="有隐患">已检查有隐患</a-select-option>
            <a-select-option value="无隐患">已检查无隐患</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div style="width: 10%; float: left; margin-top: 15px; margin-left: 20px">
        <a-form-item name="fwzt" style="margin-bottom: 0px">
          <a-select v-model:value="fwzt" placeholder="请选择出租状态">
            <a-select-option value="正常出租">正常出租</a-select-option>
            <a-select-option value="不出租">不出租</a-select-option>
            <a-select-option value="已拆除">已拆除</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div
        style="width: 25%; float: left; margin-left: 20px; margin-top: 15px; margin-bottom: 15px"
      >
        <a-input-search
          v-model:value="txtKeyWord"
          placeholder="请输入姓名、地址或房屋编号进行查询"
          enter-button
          style="width: 80%"
          @search="searchBtn"
        />
      </div>
    </div>
  </div>

  <a-table 
  style="margin-top: 0px"
  :dataSource="tableData"
  :columns="columns"
  :pagination="false"
  :scroll="{ x: 1500, y: tableHeight }"
  bordered
  :loading="loading"
  size="small"  
  />


  <div class="pagination" style="float: right" >
		<div style="float: left;line-height: 32px;padding-right: 12px;">共{{total}}条记录</div>
        <a-pagination
          show-size-changer
		  show-total
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
		  style="float:right"
          @show-size-change="onShowSizeChange"
        />
      </div>


          <!-- <BasicForm
            class="x-village-tabs"
            submitOnReset
            @register="registerForm"
            @submit="handleSearchInfoChange"
            v-bind="getFormProps"
          >
            <template #[replaceFormSlotKey(item)]="data" v-for="item in getFormSlotKeys">
              <slot :name="item" v-bind="data || {}">

              
              </slot>
            </template>
          </BasicForm> -->
        </template>
        <Button class="x-houseMng-search" type="primary" shape="circle">
          <SearchOutlined />
        </Button>
      </Popover>
      <!--       
      <div class="statMapLayers">

        <a-button type="primary">  
          <router-link to="/houseYhManager/houseManager">列表模式1</router-link>  
        </a-button>

      </div> -->
      
    <!-- <CheckDetail @showDrawer='showDrawerHan'>
  
    </CheckDetail> -->


<div class="statMapLayers">


            
      <a-input-group compact>
        <a-cascader
          v-model:value="value18"
          style="width: 200px"
          :options="options1"
          expand-trigger="hover"
          placeholder="请选择行政区定位"
          changeOnSelect
          @change="getxzqcode"
        />
      </a-input-group>
      
        <Row
        ><Checkbox defaultChecked @change="checkDcLayer"
          ><div style="display: flex; align-items: center"
            >合并隐患统计【图层】
            <div
              style="background-color: red; width: 13px; height: 12px; margin: 3px 0 0 5px"
            ></div></div></Checkbox
      ></Row>
      
      <Row
          ><Checkbox defaultChecked @change="checkHcLayer"
            ><div style="display: flex; align-items: center"
              >检查隐患统计【图层】
              <div
                style="background-color: #cc6633; width: 13px; height: 12px; margin: 3px 0 0 5px"
              ></div
            ></div> </Checkbox
        >
     
      </Row>
           <Row>
          <Checkbox defaultChecked @change="checkZcLayer"
            ><div style="display: flex; align-items: center"
              >自查隐患统计【图层】
              <div
                style="background-color: #999900; width: 13px; height: 12px; margin: 3px 0 0 5px"
              ></div></div
          ></Checkbox>
        </Row>
   <Row
          ><Checkbox defaultChecked @change="checkJcLayerfw"
            ><div style="display: flex; align-items: center"
              >检查隐患房屋【图层】
              <div
                style="background-color: #b60b00; width: 13px; height: 12px; margin: 3px 0 0 5px"
              ></div
            ></div> </Checkbox
        >
     
      </Row>
           <Row>
          <Checkbox defaultChecked @change="checkZcLayerfw"
            ><div style="display: flex; align-items: center"
              >自查隐患房屋【图层】
              <div
                style="background-color: #ffff00; width: 13px; height: 12px; margin: 3px 0 0 5px"
              ></div></div
          ></Checkbox>
        </Row>


      </div>
      
      <div :id="mapViewId" style="height: calc(100vh - 70px)"></div>
    </div>


  </div>


</template>
<script lang="ts">
  // import maplibregl from 'mapbox-gl';
  // import 'mapbox-gl/dist/mapbox-gl.css';
  import {options1} from './mapbox.js'; 
  import { watch } from 'vue';
  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getBasicColumns, tablePopupSchema } from './tableData';
  // import { PageWrapper } from '/@/components/Page';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Tree, Tabs, Space, Divider, PageHeader, Tag, Collapse, Button, Popover } from 'ant-design-vue';
  import { Col, Row, Checkbox, Affix } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import {
    defineComponent,
    onMounted,
    reactive,
    ref,
    ComputedRef,
    computed,
    Ref,
    toRefs,
  } from 'vue';
  import { houseListApi, houseApi, hiddenDangerStatApi } from '/@/api/demo/table';
  import * as tableDataPopup from '/@/views/map/tableDataPopup';
  import { useGlobSetting } from '/@/hooks/setting';
  const globSetting = useGlobSetting();
  import { getSearchFormSchema } from '/@/views/house/tableData';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const { info, success, warning, error } = createMessage;
  import { FormProps, FormSchema } from '/@/components/Table';
  import AuditModal from './AuditModal.vue';
  import { useModal } from '/@/components/Modal';
  import type { UserInfo } from '/#/store';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { useDrawer } from '/@/components/Drawer';
  import bj_center from '/@/assets/bj_center.json';
  import jiedao_center from '/@/assets/jiedao_center.json';
  import qx_center from '/@/assets/qx_center.json';
  import cun_center from '/@/assets/cun_center.json';

  import CheckDetail from '/@/views/village/threePure/cjworkstaticMap/component/checkDetailDrawer.vue';
  import { Table } from 'ant-design-vue';
  const imgList: string[] = [];
  export default defineComponent({
    name: 'HouMng',
    components: {
      ATable: Table,
      CheckDetail,
      ImagePreview,
      BasicTable,
      BasicForm,
      AuditModal,
      TableAction,
      // PageWrapper,
      Tabs,
      Divider,
      PageHeader,
      Space,
      SearchOutlined,
      Popover,
      Collapse,
      Tag,
      TabPane: Tabs.TabPane,
      Button,
      Col,
      Row,
      Checkbox,
      Affix,
    },
    props: {
      msg: String,
      mapViewId: {
        type: String,
        default: 'map',
      },
      showMapOnly: {
        type: Boolean,
        default: false,
      },
      showMapPopupButtons: {
        type: Boolean,
        default: true,
      },
    },

    setup(props, { attrs, emit, slots, expose }) {


      const columns = reactive([
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          align: 'center',
          width: 30,
        },
        {
          title: '房屋编号',
          dataIndex: 'fwbh',
          key: 'fwbh',
          align: 'center',
          width: 80,
        },
        {
          title: '状态',
          align: 'center',
          width: 80,
          customCell: (row, index, column) => {
            let zcstyle = 'color:#000;cursor: default;';
            if (row.zczt == '已自查') {
              zcstyle = 'color:blue;cursor:pointer;';
            }
            let jcstyle = 'color:#000;cursor: default';
            if (row.jczt == '已检查') {
              jcstyle = 'color:blue;cursor:pointer;';
            }
            return {
              innerHTML: `<span style=${zcstyle} >${row.zczt}</span>/<span style=${jcstyle}>${row.jczt}</span>`,
              onClick: async () => {
                getDetailData(row, index, column);
              },
            };
          },
        },
        {
          title: '区名称',
          dataIndex: 'xzq',
          key: 'xzq',
          align: 'center',
          width: 80,
        },
        {
          title: '街/乡镇名称',
          dataIndex: 'town',
          key: 'town',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'town' },
          ellipsis: true, //需ant版本为1.5及以上
        },
        {
          title: '村/社区名称',
          dataIndex: 'village',
          key: 'village',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'village' },
          ellipsis: true, //需ant版本为1.5及以上
        },
        {
          title: '用户姓名',
          dataIndex: 'hzxm',
          key: 'hzxm',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'hzxm' },
          ellipsis: true, //需ant版本为1.5及以上
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'address' },
          ellipsis: true, //需ant版本为1.5及以上
        },
        {
          title: '房屋状态',
          dataIndex: 'fwzt',
          key: 'fwzt',
          align: 'center',
          width: 80,
          customCell: (row, index, column) => {
            let style = '';
            if (row.fwzt == '正常出租') {
              style = 'color: green;';
            } else if (row.fwzt == '不出租') {
              style = 'color: blue;';
            } else if (row.fwzt == '已拆除') {
              style = 'color: red;';
            }
            return {
              style: style,
              class: 'cell-hover',
            };
          },
        },
        {
          title: '最近一次自查时间',
          dataIndex: 'zc_create_on',
          key: 'zc_create_on',
          align: 'center',
          width: 80,
        },
        {
          title: '最近一次检查时间',
          dataIndex: 'jc_create_on',
          key: 'jc_create_on',
          align: 'center',
          width: 80,
        },
        {
          title: '定位',
          align: 'center',
          width: 80,
          customCell: (row, index, column) => {
            
          // 返回一个对象，该对象包含一个用于后续绑定事件的唯一标识符  
            return {  
              innerHTML: `<span id="location-icon-${index}" style="color:blue">  
                <img src='../assets/icons/postion.png' style='width:20px;margin: 0px 20px;cursor: pointer;'>  
              </span>`,  
              onClick: async () => {
                locMap(row.fwbh);
              },
                
            };  
          },
        },
      ]);

      // return {
      // //  dataSource,
      //   // columns,
      // };
      //  地图开始
      const activeKeyRef = ref('map');
      const activePickKeyRef = ref('fire');
      const activeMapPickKeyRef = ref('map');
      const searchVisible = ref(false);
      const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;

      const mapC = ref<maplibregl.Map>();
      const pickedHouse = ref({});
      const pickedHouseId = ref('');
      const houseFirePlaceRef = ref();
      const housePolicePlaceRef = ref();

      const enablepcztzc = ref(true);
      const enablepcztHb = ref(true);
      const enablepczthc = ref(true);
      const enablepcztzcfw = ref(true);
      const enablepcztjcfw = ref(true);
      const tjcountTcID=ref(true);
      const userStore = useUserStore();

      function calcModes(user: UserInfo) {
        if (user) {
          if ('Admin' == user.role) {
            return ['fire', 'police', 'housing'];
          } else {
            if ('FireControl' == user.userGroup) {
              return ['fire'];
            } else if ('Police' == user.userGroup) {
              return ['police'];
            } else if ('Housing' == user.userGroup) {
              return ['housing'];
            }
          }
        }

        return [];
      }

      const underMode = calcModes(userStore.getUserInfo);
      console.log('@getUserInfo=========', underMode);
      const tk = userStore.getToken;
      console.log('@tk=========', tk);
      let protocol = window.document.location.protocol;
      let host = window.document.location.host;
      let localhostPath = protocol + '//' + host;

      //图斑权限过滤
      // const { jurisdictionCodes } = userStore.getUserInfo;
      const mapstyle = reactive<maplibregl.Style>({
        version: 8,
        sources: {
          OSM: {
            type: 'raster',
            tiles: [
              'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=82917dfddef988b400ff306a56c1c7de',
            ],
            tileSize: 256,
            minzoom: 0,
            maxzoom: 18,
          },
          tianditu: {
            type: 'raster',
            tiles: [
              'http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk==82917dfddef988b400ff306a56c1c7de',
            ],
            tileSize: 256,
            minzoom: 0,
            maxzoom: 18,
          },
          buzBase: {
            type: 'vector',
            scheme: 'xyz',
            tiles: [
              `${uriBase}/houses/base/static/vector/tiles?x={x}&y={y}&z={z}&access_token=${tk}`,
            ],
            minzoom: 11,
            maxzoom: 18,
          },
          buz: {
            type: 'vector',
            scheme: 'xyz',
            tiles: [`${uriBase}/houses/dynamic/vector/tiles?x={x}&y={y}&z={z}&access_token=${tk}`],
            minzoom: 8,
            maxzoom: 18,
          },
          sampleAll: {
            type: 'vector',
            scheme: 'xyz',
            tiles: [
              `${uriBase}/risk-census-house/dynamic/vector/tiles?x={x}&y={y}&z={z}&access_token=${tk}`,
            ],
            minzoom: 11,
            maxzoom: 18,
          },
          highLight: {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [],
            },
          },
          bjMap: {
            type: 'geojson',
            data: `${localhostPath}/xzq/bj.json`,
          },
          qxMap: {
            type: 'geojson',
            data: `${localhostPath}/xzq/qx.json`,
          },
          jiedaoMap: {
            type: 'geojson',
            data: `${localhostPath}/xzq/jiedao.json`,
          },
        },
        layers: [
          {
            id: 'OSM',
            type: 'raster',
            source: 'OSM',
          },
          {
            id: 'bjMap',
            type: 'line',
            source: 'bjMap',
            paint: {
              'line-color': '#f8af58',
              'line-width': 2,
              'line-dasharray': [1, 1],
            },
            maxzoom: 7,
          },
          {
            id: 'bjMap-anno',
            type: 'symbol',
            source: 'bjMap',
            minzoom: 7,
            maxzoom: 10,
            layout: {
              'text-field': '{XZQMC}',
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
            },
            paint: {
              'text-color': 'rgb(255,255,255)',
              'text-halo-width': 1,
              'text-halo-color': 'rgb(0,0,0)',
            },
          },
          {
            id: 'qxMap',
            type: 'line',
            source: 'qxMap',
            paint: {
              'line-color': '#f8af58',
              'line-width': 2,
              'line-dasharray': [1, 1],
            },
            minzoom: 7,
            maxzoom: 10,
          },
          {
            id: 'qxMap-anno',
            type: 'symbol',
            source: 'qxMap',
            minzoom: 7,
            maxzoom: 10,
            layout: {
              'text-field': '{XZQMC}',
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
              'icon-allow-overlap': true, // 允许图标重叠
            },
            paint: {
              'text-color': 'rgb(255,255,255)',
              'text-halo-width': 1,
              'text-halo-color': 'rgb(0,0,0)',
            },
          },
          {
            id: 'jiedaoMap',
            type: 'line',
            source: 'jiedaoMap',
            paint: {
              'line-color': '#ef9325',
              'line-width': 4,
              'line-dasharray': [1, 1],
            },
            minzoom: 10,
            maxzoom: 22,
          },
          {
            id: 'jiedaoMap-anno',
            type: 'symbol',
            source: 'jiedaoMap',
            minzoom: 10,
            maxzoom: 22,
            layout: {
              'text-field': '{NAME}',
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
              'icon-allow-overlap': true, // 允许图标重叠
            },
            paint: {
              'text-color': 'rgb(255,255,255)',
              'text-halo-width': 1,
              'text-halo-color': 'rgb(0,0,0)',
            },
          },
          {
            id: 'pcztzc',
            'source-layer': 'ffpolygon',
            type: 'fill',
            source: 'buz',
            minzoom: 10,
            maxzoom: 22,
            paint: {
              'fill-color': '#ffff00',
            },
            filter: ['==', 'pcztzc', 0],
            // filter: ['in', 'aqyhcp', '1', '3'],
          },

          {
            id: 'pcztjc',
            'source-layer': 'ffpolygon',
            type: 'fill',
            source: 'buz',
            minzoom: 10,
            maxzoom: 22,
            paint: {
              'fill-color': '#b60b00',
            },
            filter: ['==', 'pcztjc', 0],
          },
        
      
          {
            id: 'allHouses',
            'source-layer': 'ffpolygon',
            type: 'fill',
            source: 'buz',
            minzoom: 10,
            maxzoom: 22,
            paint: {
              'fill-color': 'transparent',
            },
          },
          {
            // Line layer for the outline
            id: 'allHousesOutline',
            'source-layer': 'ffpolygon',
            type: 'line',
            source: 'buz',
            minzoom: 10,
            maxzoom: 22,
            paint: {
              'line-color': '#3b85ff', // Blue outline
              'line-width': 3, // Width of the outline
            },
          },





          {
            id: 'highLight',
            type: 'fill',
            source: 'highLight',
            paint: {
              'fill-opacity': 0.6,
              'fill-color': 'blue',
            },
          },

          {//隐患气泡【自查】
            id: 'pcztzc-point',
            type: 'symbol',
            source: 'buz',
            'source-layer': 'ffpolygon',
            minzoom: 12,
            maxzoom: 22,
            filter: ['==', 'pcztzc', 0], // 根据你的数据调整过滤条件
            layout: {
              'icon-image': 'custom-icon', // 使用地图中已添加的图像名称
              'icon-size': 0.5, // 图标大小，可以根据需要调整
              // "icon-anchor": "top-center", // 将图标锚点设置在顶部中央
              'icon-offset': [0, -100], // 向下偏移图标，这里的例子是将图标向上偏移10个像素
              // // "text-field": "隐患",  // 添加文本标签
              // "text-size": 12,     // 文本大小，可以根据需要调整
              'icon-allow-overlap': true, // 允许图标重叠
            },
            paint: {
              'icon-color': '#b60b00', // 图标颜色，如果需要的话
            },
            popup: {
              // 添加了popup对象来定义弹出框的内容
              title: '隐患', // 气泡弹窗的标题
              description: '这里是描述隐患的内容，可以根据需要进行修改', // 气泡弹窗的描述内容
            },
          },

           {//隐患气泡【检查】
            id: 'pcztjc-point',
            type: 'symbol',
            source: 'buz',
            'source-layer': 'ffpolygon',
            minzoom: 12,
            maxzoom: 22,
            filter: ['==', 'pcztjc', 0], // 根据你的数据调整过滤条件
            layout: {
              'icon-image': 'custom-iconjc', // 使用地图中已添加的图像名称
              'icon-size': 0.5, // 图标大小，可以根据需要调整
              // "icon-anchor": "top-center", // 将图标锚点设置在顶部中央
              'icon-offset': [0, -100], // 向下偏移图标，这里的例子是将图标向上偏移10个像素
              // // "text-field": "隐患",  // 添加文本标签
              // "text-size": 12,     // 文本大小，可以根据需要调整
              'icon-allow-overlap': true, // 允许图标重叠
            },
            paint: {
              'icon-color': '#b60b00', // 图标颜色，如果需要的话
            },
            popup: {
              // 添加了popup对象来定义弹出框的内容
              title: '隐患', // 气泡弹窗的标题
              description: '这里是描述隐患的内容，可以根据需要进行修改', // 气泡弹窗的描述内容
            },
          },
        ],

         
       
        sprite: `${localhostPath}/maplib/sprites/sprite`,
        glyphs: `${localhostPath}/maplib/font/{fontstack}/{range}.pbf`,
      });
      const mapopC: maplibregl.Popup[] = [];
      function clickPopUpOk(_) {
        if (mapopC.length > 0) {
          mapopC[0].remove();
        }
      }
      //  地图结束
      const [register5, { openDrawer: openDrawer5, setDrawerProps }] = useDrawer();
      

      function searchBtn() {
        console.log("searchBtn");
        
        data.loading = true;
        getData();
      }

//  Dom 开始
      


// getxzqcode(value, selectedData) {  
//       // 当级联选择器的值发生变化时，这个方法会被调用  
//       // value 是当前选中的值（可能是数组，因为可能是多级选择）  
//       // selectedData 是选中项的详细信息，通常是一个对象数组  
//       console.log('Selected:', value, selectedData);  
//       // 你可以在这里添加自己的逻辑来处理选中值  
//     },  
    

   
      function getxzqcode(value) {
    console.log("getxzqcode", value);

    let getcode = null;
    let coordinates = null;
    let arr = (value && Array.isArray(value) ? value : []);
    switch (arr.length) {
        case 3: 
            if (arr[2]) {
                getcode = arr[2]; 
            }
            coordinates = findCoordinatesByRegionId3(getcode, cun_center);
            locMapxy(coordinates, 16);
            break;
        case 2: 
            if (arr[1]) {
                getcode = arr[1].slice(0,-3); 
            }
            coordinates = findCoordinatesByRegionId2(getcode, jiedao_center);
            locMapxy(coordinates, 13);
            break;
        case 1: 
            if (arr[0]) { // 确保 arr[0] 存在
                getcode = arr[0];  
            }
            coordinates = findCoordinatesByRegionId(getcode, qx_center);
            locMapxy(coordinates, 10);
            break;

        default:  
            coordinates = null; 
            break;
    }  

    // if (coordinates) {
    //     // 定位到坐标
    //     locMapxy(coordinates, 9);
    // }

    // // 行政区编码
    // let regioncode = processArray(value);

    // console.log("flyTo", coordinates);

    value18.value = value;
};




   const findCoordinatesByRegionId = (regionId,geojson) => {
          for (let i = 0; i < geojson.features.length; i++) {
          const feature = geojson.features[i];
          if (feature.properties.RegionId === regionId) {
            console.log('Found match:', feature);
            return feature.geometry.coordinates;
          }
        }
        return null;  
          };



const findCoordinatesByRegionId2 = (regionId, geojson) => {
  for (let i = 0; i < geojson.features.length; i++) {
    const feature = geojson.features[i];
    // 确保RegionId属性存在并进行比较
    if (feature.properties && feature.properties.PAC === regionId) {
      console.log('Found match:', feature);
      return feature.geometry.coordinates;
    }
  }
  // 如果没有找到匹配的行政区编码，返回null
  return null;
};


const findCoordinatesByRegionId3 = (regionId, geojson) => {
  for (let i = 0; i < geojson.features.length; i++) {
    const feature = geojson.features[i];
    // 确保RegionId属性存在并进行比较
    if (feature.properties && feature.properties.village === regionId) {
      console.log('Found match:', feature);
      return feature.geometry.coordinates;
    }
  }
  // 如果没有找到匹配的行政区编码，返回null
  return null;
};

function processArray(arr) {  
    // 根据数组长度决定如何取值  
    switch (arr.length) {  
        case 1: // 如果数组长度为1，直接取第一个元素  
            return arr[0];  
        case 2: // 如果数组长度为2，取第二个元素并截取后三位（由于此处是编码，我们假设都是足够长的字符串）  
            return arr[1].slice(-3); // 假设截取最后三位，即使它可能不足三位  
        case 3: // 如果数组长度为3，取第二个元素  
            return arr[1];  
        default: // 如果数组长度不是1、2或3，返回空字符串或进行其他处理  
            return '';  
    }  
} 
    //   function findCoordinatesByRegionId(geojson, regionId) {  
      
    //   // 遍历 GeoJSON 数据的 features 数组  
    //   for (let i = 0; i < geojson.features.length; i++) {  
    //     // debugger;
    //     const feature = geojson.features[i];  
    //     // 检查当前 Feature 的 RegionId 是否与要查询的 regionId 匹配  
    //     if (feature.properties.RegionId === regionId) {  

    //       console.log(feature.properties.RegionId );
          
    //       // 如果匹配，返回该 Feature 的坐标  
    //       return feature.geometry.coordinates;  
    //     }  
    //   }  
    //   // 如果没有找到匹配的 RegionId，则返回 null  
    //   return null;  
    // }  

      let pageIndex = ref(1);
      let pageSize = ref(10);
      const value18 = ref<string[]>([]);
      let txtKeyWord = ref<string>('');
      let zczt = ref<string>('');
      let jczt = ref<string>('');
      let zc_yhzt = ref<string>('');
      let jc_yhzt = ref<string>('');
      let fwzt = ref<string>('正常出租');
      let total = ref(0);
      let params: iParams = {
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
        txtKeyWord: txtKeyWord.value,
        fwzt: fwzt.value,
        zczt: zczt.value,
        jczt: jczt.value,
        zc_yhzt: zc_yhzt.value,
        jc_yhzt: jc_yhzt.value,
      };
      // if (value18.value != undefined) {
      //   params.xzqdm = value18.value[0];
      //   params.towndm = value18.value[1];
      //   params.villagedm = value18.value[2];
      // };
      let data = reactive<{
        tableData: iTableData[];
        tableColumns: iTableColumns[];
        wscolsList: { wch: number }[];
        id: number | any;
        loading: Boolean;
        keyWorld: String;
        currentqx: string; // 当前行政区名称
        currentTitle: string;
        cityToken: string | any;
      }>({
        // 表格数据
        tableData: [],
        tableColumns: [
          {
            title: '序号1',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            width: 80,
          },
          {
            title: '房屋编号',
            dataIndex: 'fwbh',
            key: 'fwbh',
            align: 'center',
            width: 150,
          },
          {
            title: '状态',
            align: 'center',
            width: 130,
            customCell: (row, index, column) => {
              let zcstyle = 'color:#000;cursor: default;';
              if (row.zczt == '已自查') {
                zcstyle = 'color:blue;cursor:pointer;';
              }
              let jcstyle = 'color:#000;cursor: default';
              if (row.jczt == '已检查') {
                jcstyle = 'color:blue;cursor:pointer;';
              }
              return {
                innerHTML: `<span style=${zcstyle} >${row.zczt}</span>/<span style=${jcstyle}>${row.jczt}</span>`,
                onClick: async () => {
                  getDetailData(row, index, column);
                },
              };
            },
          },
          {
            title: '区名称',
            dataIndex: 'xzq',
            key: 'xzq',
            align: 'center',
            width: 80,
          },
          {
            title: '街/乡镇名称',
            dataIndex: 'town',
            key: 'town',
            align: 'center',
            width: 100,
            scopedSlots: { customRender: 'town' },
            ellipsis: true, //需ant版本为1.5及以上
          },
          {
            title: '村/社区名称',
            dataIndex: 'village',
            key: 'village',
            align: 'center',
            width: 130,
            scopedSlots: { customRender: 'village' },
            ellipsis: true, //需ant版本为1.5及以上
          },
          {
            title: '用户姓名',
            dataIndex: 'hzxm',
            key: 'hzxm',
            align: 'center',
            width: 100,
            scopedSlots: { customRender: 'hzxm' },
            ellipsis: true, //需ant版本为1.5及以上
          },
          {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
            align: 'left',
            width: 280,
            scopedSlots: { customRender: 'address' },
            ellipsis: true, //需ant版本为1.5及以上
          },
          {
            title: '房屋状态',
            dataIndex: 'fwzt',
            key: 'fwzt',
            align: 'center',
            width: 100,
            customCell: (row, index, column) => {
              let style = '';
              if (row.fwzt == '正常出租') {
                style = 'color: green;';
              } else if (row.fwzt == '不出租') {
                style = 'color: blue;';
              } else if (row.fwzt == '已拆除') {
                style = 'color: red;';
              }
              return {
                style: style,
                class: 'cell-hover',
              };
            },
          },
          {
            title: '最近一次自查时间',
            dataIndex: 'zc_create_on',
            key: 'zc_create_on',
            align: 'center',
            width: 150,
          },
          {
            title: '最近一次检查时间',
            dataIndex: 'jc_create_on',
            key: 'jc_create_on',
            align: 'center',
            width: 150,
          },
          {
            title: '操作',
            align: 'center',
            width: 80,
            customCell: (row, index, column) => {
              return {
                innerHTML: `<span style="color:blue"><img src='../assets/icons/postion.png' style='width:20px;margin: 0px 20px;cursor: pointer;'></span>`,
              };
            },
          },
        ],
        id: null,
        loading: true,
        keyWorld: '',
        cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
        currentqx: '', // 当前行政区名称
        currentTitle: '', // 当前详情标题
        wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
      });

      let { tableData, loading, currentqx, currentTitle } = toRefs(data);

      async function getData() {
        console.log(' txtKeyWord.value', txtKeyWord);
        let params: iParams = {
          pageIndex: pageIndex.value,
          pageSize: pageSize.value,
          txtKeyWord: txtKeyWord.value,
          fwzt: fwzt.value,
          zczt: zczt.value,
          jczt: jczt.value,
          zc_yhzt: zc_yhzt.value,
          jc_yhzt: jc_yhzt.value,
        };
        if (value18.value != undefined) {
          params.xzqdm = value18.value[0];
          params.towndm = value18.value[1];
          params.villagedm = value18.value[2];
        }
        loading.value = true;
        let res: any = await houseListApi(params);
        console.log('@res--查询列表', res.items);

        if (res || res.items.length > 0) {
          loading.value = false;
          data.tableData = [...res.items];
          total.value = res.total;
        }
      }

//  Dom 结束
      function clickPopupButtonOk(obj) {
        pickedHouse.value = obj;
        pickedHouseId.value = obj.id;

        emit('onPopupButtonOkClick', obj);
      }

      function clickPopupButtonPolice(obj) {
        pickedHouse.value = obj;
        pickedHouseId.value = obj.id;

        emit('onPopupButtonPoliceClick', obj);
      }

      function clickPopupButtonFire(obj) {
        pickedHouse.value = obj;
        pickedHouseId.value = obj.id;

        emit('onPopupButtonFireClick', obj);
      }

      function clickPopupButtonZhujian(obj) {
        pickedHouse.value = obj;
        pickedHouseId.value = obj.id;

        emit('onPopupButtonZhujianClick', obj);
      }

      function createPopUp(features) {
        return tableDataPopup.createPopUpEx(
          features,
          tablePopupSchema(),
          clickPopUpOk,
          houseApi,
          clickPopupButtonOk,
          clickPopupButtonFire,
          clickPopupButtonPolice,
          clickPopupButtonZhujian,
          {
            visibleButtons: props.showMapPopupButtons,
            visibleStatus: true,
          },
        );
      }

      function popupInfo(e) {
        console.log("eee",e);
        
        if (e.features && e.features.length > 0) {
          const geojsonData: any = {
            type: 'FeatureCollection',
            features: e.features,
          };
          const map = mapC.value;
          var mySource: maplibregl.GeoJSONSource = map.getSource(
            'highLight',
          ) as maplibregl.GeoJSONSource;
          mySource.setData(geojsonData);
           console.log("geojsonData",geojsonData);

          //创建内容
          createPopUp(e).then((popupTemp) => {
            let currentPopup = new maplibregl.Popup();
            currentPopup.addClassName('click-map-popup');
            currentPopup.setLngLat(e.lngLat).setDOMContent(popupTemp).addTo(map);

            mapopC.length = 0;
            mapopC.push(currentPopup);
          });
        }
      }

      function addStatLayer(
        type: number,
        propName: string,
        map: maplibregl.Map,
        sourceId: string,
        geojsonData: any,
        minz: number,
        maxz: number,
        findV: Function,
      ) {
        hiddenDangerStatApi(type).then((resp) => {
          geojsonData.features.forEach((element) => {
            const eleValue = element.properties[propName];

            const findVal = resp.find((item) => findV(item, eleValue));

            if (findVal) {
              element.properties['cchb'] = `${findVal.hbyhcount}`;
              element.properties['ccjc'] = `${findVal.jcyhcount}`;
              element.properties['cczc'] = `${findVal.zcyhcount}`;
            } else {
              element.properties['cchb'] = '0';
              element.properties['ccjc'] = '0';
              element.properties['cczc'] = '0';
            }
          });
          map.addSource(sourceId, {
            type: 'geojson',
            data: geojsonData,
          });
          

       

          map.addLayer({ //统计图标自查
            id: `${sourceId}zc`,
            type: 'symbol',
            source: sourceId,
            minzoom: minz,
            maxzoom: maxz,
            layout: {
              'text-field': [
                'format',
                '',
                { 'font-scale': 1.5 },
                ['to-string', ['get', 'cczc']], // 将数字转换为文本
                {
                  'text-color': '#ffffff',
                },
              ],
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
              // 'icon-text-fit': 'both',
              'icon-image': 'bgstat2',
              'icon-offset': [0, 2],

              //  'icon-text-fit-padding': [8, 6, 8, 6],
            },
            paint: {
              'text-color': 'white',
              'icon-halo-width': 1,
              'icon-halo-color': '#f3e5d4',
            },
            filter: ['!=', ['get', 'cczc'], '0'], // 当 cczc 不为空时显示图标
          });


          map.addLayer({ //统计图标检查
            id: `${sourceId}jc`,
            type: 'symbol',
            source: sourceId,
            minzoom: minz,
            maxzoom: maxz,
            layout: {
              'text-field': [
                'format',
                '',
                { 'font-scale': 1.5 },
                ['to-string', ['get', 'ccjc']], // 将数字转换为文本
                {
                  'text-color': '#ffffff',
                },
              ],
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
              // 'icon-text-fit': 'both',
              'icon-image': 'bgstat3',
              'icon-offset': [0, 2],

              //  'icon-text-fit-padding': [8, 6, 8, 6],
            },
            paint: {
              'text-color': 'white',
              'icon-halo-width': 1,
              'icon-halo-color': '#f3e5d4',
            },
            filter: ['!=', ['get', 'ccjc'], '0'], // 当 cczc 不为空时显示图标
          });

          map.addLayer({ //统计图标合并
            id: `${sourceId}hb`,
            type: 'symbol',
            source: sourceId,
            minzoom: minz,
            maxzoom: maxz,
            layout: {
              'text-field': [
                'format',
                '',
                { 'font-scale': 1.5 },
                ['to-string', ['get', 'cchb']], // 将数字转换为文本
                {
                  'text-color': '#ffffff',
                },
              ],
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
              // 'icon-text-fit': 'both',
              'icon-image': 'statImg',
              'icon-offset': [0, 2],

              //  'icon-text-fit-padding': [8, 6, 8, 6],
            },
            paint: {
              'text-color': 'white',
              'icon-halo-width': 1,
              'icon-halo-color': '#f3e5d4',
            },
            filter: ['!=', ['get', 'cchb'], '0'], // 当 cczc 不为空时显示图标
          });
          
        });
      }



      function checkXXXLayer(lyr,lyrqp, bj,qx,jd,cv) {

        console.log("enablepczthc",enablepczthc.value);
        console.log("enablepcztzc",enablepcztzc.value);
        console.log("enablepcztHb",enablepcztHb.value);

        // checkXXXLayer(`pcztjc`,'pcztjc-point','bjCenterMapjc','qxCenterMapjc','jiedao_centerjc', enablepczthc.value);
        // checkXXXLayer(`pcztzc`,'pcztzc-point','bjCenterMapzc','qxCenterMapzc','jiedao_centerzc', enablepcztzc.value);
        // checkXXXLayer('pcztzc','pcztzc-point','bjCenterMaphb','qxCenterMaphb','jiedao_centerhb', enablepcztHb.value);


        const map = mapC.value;
        if (enablepcztzc.value) {
          map.setLayoutProperty('pcztzc', 'visibility', 'visible');
          map.setLayoutProperty('pcztzc-point', 'visibility', 'visible');
          map.setLayoutProperty('bjCenterMapzc', 'visibility', 'visible');
          map.setLayoutProperty('qxCenterMapzc', 'visibility', 'visible');
          map.setLayoutProperty('jiedao_centerzc', 'visibility', 'visible');
        } else {
          map.setLayoutProperty('pcztzc', 'visibility', 'none');
          map.setLayoutProperty('pcztzc-point', 'visibility', 'none');
          map.setLayoutProperty('bjCenterMapzc', 'visibility', 'none');
          map.setLayoutProperty('qxCenterMapzc', 'visibility', 'none');
          map.setLayoutProperty('jiedao_centerzc', 'visibility', 'none');
        }

        if (enablepczthc.value) {
          map.setLayoutProperty('pcztjc', 'visibility', 'visible');
          map.setLayoutProperty('pcztjc-point', 'visibility', 'visible');
          map.setLayoutProperty('bjCenterMapjc', 'visibility', 'visible');
          map.setLayoutProperty('qxCenterMapjc', 'visibility', 'visible');
          map.setLayoutProperty('jiedao_centerjc', 'visibility', 'visible');
        } else {
          map.setLayoutProperty('pcztjc', 'visibility', 'none');
          map.setLayoutProperty('pcztjc-point', 'visibility', 'none');
          map.setLayoutProperty('bjCenterMapjc', 'visibility', 'none');
          map.setLayoutProperty('qxCenterMapjc', 'visibility', 'none');
          map.setLayoutProperty('jiedao_centerjc', 'visibility', 'none');
        }

        if (enablepcztHb.value) {
          map.setLayoutProperty('bjCenterMaphb', 'visibility', 'visible');
          map.setLayoutProperty('qxCenterMaphb', 'visibility', 'visible');
          map.setLayoutProperty('jiedao_centerhb', 'visibility', 'visible');
        } else {
          map.setLayoutProperty('bjCenterMaphb', 'visibility', 'none');
          map.setLayoutProperty('qxCenterMaphb', 'visibility', 'none');
          map.setLayoutProperty('jiedao_centerhb', 'visibility', 'none');
        }

        if (enablepcztzcfw.value) {
          map.setLayoutProperty('pcztzc', 'visibility', 'visible');
          map.setLayoutProperty('pcztzc-point', 'visibility', 'visible');
        } else {
          map.setLayoutProperty('pcztzc', 'visibility', 'none');
          map.setLayoutProperty('pcztzc-point', 'visibility', 'none');
        }
        if (enablepcztjcfw.value) {
          map.setLayoutProperty('pcztjc', 'visibility', 'visible');
          map.setLayoutProperty('pcztjc-point', 'visibility', 'visible');
        } else {
          map.setLayoutProperty('pcztjc', 'visibility', 'none');
          map.setLayoutProperty('pcztjc-point', 'visibility', 'none');
        }

      }

      function updateStatSource(
        type: number,
        propName: string,
        sourceId: string,
        geojsonData: any,
        findV: Function,
      ) {
        console.log("sourceId",sourceId);
        
        // console.log("enablepcztzc.value",  enablepcztzc.value);
      

        // if (enablepczthc.value || enablepcztHb.value || enablepcztzc.value) {
        //   checkXXXLayer(`${sourceId}-anno`, true);
        // } else {
        //   checkXXXLayer(`${sourceId}-anno`, false);
        // }
        const layoutTextProperty: any[] = [];
        // layoutTextProperty.push('format');
        // if (enablepczthc.value) {
        //   layoutTextProperty.push(['get', 'cchc']);
        //   layoutTextProperty.push({
        //     'text-color': '#ffff00',
        //   });
        // }
        // if (enablepcztzc.value) {
        //   if (layoutTextProperty.length > 1) {
        //     layoutTextProperty.push('\t|\t');
        //     layoutTextProperty.push({ 'font-scale': 1.1 });
        //   }
        //   layoutTextProperty.push(['get', 'cczc']);
        //   layoutTextProperty.push({
        //     'text-color': '#b60b00',
        //   });
        // }
        // mapC.value.setLayoutProperty(`${sourceId}-anno`, 'text-field', layoutTextProperty);
      }

      onMounted(() => {
        console.log('******地图初始化钩子******');
        //  handleSearchInfoChange();
        // getData();
      
        const map = new maplibregl.Map({
          container: props.mapViewId,
          style: mapstyle,
          center: [116.5, 40.05],
          zoom: 9,
          maxZoom: 20,
        });
        map.addControl(new maplibregl.NavigationControl());
        mapC.value = map;
        map.on('click', 'allHouses', function (e) {
          // 查询WMS要素属性
          popupInfo(e);
          e.preventDefault();
        });
        map.on('click', 'pcztzc-point', function (e) {
          // 查询WMS要素属性
          popupInfo(e);
          e.preventDefault();
        });
        map.on('click', 'pcztjc-point', function (e) {
          // 查询WMS要素属性
          popupInfo(e);
          e.preventDefault();
        });
   
      map.on('click', `bjCenterMapzc`, function(e) {
        map.flyTo({
          center: e.features[0].geometry.coordinates,
          zoom: 8,
        });
      });

      map.on('click', `qxCenterMapzc`, function(e) {
        map.flyTo({
          center: e.features[0].geometry.coordinates,
          zoom: 11,
        });
      });

      map.on('click', `jiedao_centerzc`, function(e) {
        map.flyTo({
          center: e.features[0].geometry.coordinates,
          zoom: 13,
        });
      });

      map.on('click', `bjCenterMapjc`, function(e) {
        map.flyTo({
          center: e.features[0].geometry.coordinates,
          zoom: 8,
        });
      });

      map.on('click', `qxCenterMapjc`, function(e) {
        map.flyTo({
          center: e.features[0].geometry.coordinates,
          zoom: 11,
        });
      });

      map.on('click', `jiedao_centerjc`, function(e) {
        map.flyTo({
          center: e.features[0].geometry.coordinates,
          zoom: 13,
        });
      });

      map.on('click', `bjCenterMaphb`, function(e) {
        map.flyTo({
          center: e.features[0].geometry.coordinates,
          zoom: 8,
        });
      });

      map.on('click', `qxCenterMaphb`, function(e) {
        map.flyTo({
          center: e.features[0].geometry.coordinates,
          zoom: 11,
        });
      });

      map.on('click', `jiedao_centerhb`, function(e) {
        map.flyTo({
          center: e.features[0].geometry.coordinates,
          zoom: 13,
        });
      });


        // 聚合图片

      

        const bgstat2 = new Image();  
        bgstat2.onload = function() {  
          map.addImage('bgstat2', this);  
        };  
        bgstat2.src = './resource/img/bgstat2.png';

        const bgstat3 = new Image();  
        bgstat3.onload = function() {  
          map.addImage('bgstat3', this);  
        };  
        bgstat3.src = './resource/img/bgstat3.png';



        map.loadImage('./resource/img/bgstat1.png', (error, image) => {
          if (error) throw error;
          map.addImage('statImg', image);
        //  map.addImage('bgstat2', './resource/img/bgstat2.png', {   });  
        //  map.addImage('bgstat3', './resource/img/bgstat3.png', {   });  
        
          addStatLayer(0, 'RegionId', map, 'bjCenterMap', bj_center, 1, 7, () => true);
          addStatLayer(
            1,
            'RegionId',
            map,
            'qxCenterMap',
            qx_center,
            7,
            10,
            (item, eleValue) => item.code === eleValue,
          );
          addStatLayer(
            2,
            'PAC',
            map,
            'jiedao_center',
            jiedao_center,
            10,
            12,
            (item, eleValue) => item.code.substring(0, 9) === eleValue,
          );
        });



        map.loadImage('./resource/img/bgstat_zc.png', (error, image) => {
          if (error) throw error;
          map.addImage('custom-icon', image);
        });
        map.loadImage('./resource/img/bgstat_jc.png', (error, image) => {
          if (error) throw error;
          map.addImage('custom-iconjc', image);
        });

        
      });

      const [registerModal, callbackUseModal] = useModal();

      function cloneSearchSchema(serSchema: FormSchema[]) {
        var serSchemaClone: FormSchema[] = [];
        serSchema.forEach((ele) => {
          const a: FormSchema = Object.assign({}, ele);
          a.colProps = { span: 12, flex: 1 };
          serSchemaClone.push(a);
        });

        return serSchemaClone;
      }

      var serSchema = getSearchFormSchema(underMode);

      const [registerTable, { reload }] = useTable({
        api: houseListApi,
        columns: getBasicColumns(),
        pagination: { pageSize: 15 },
        formConfig: {
          schemas: cloneSearchSchema(serSchema),
        },
        useSearchForm: true,
        bordered: true,
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      function handleReloadCurrent() {
        reload();
      }

      function handleReload() {
        reload({
          page: 1,
        });
      }

      function handleSuccess() {
        reload();
      }

      function onBack2Map() {
        pickedHouseId.value = '';
        pickedHouse.value = '';
      }

      function handleStatus(record: Recordable) {
        callbackUseModal.openModal(true, {
          record,
          isUpdate: true,
        });
      }
      function handleLocMap(record: Recordable) {
        activeKeyRef.value = 'map';
        let lng = record.lng;
        let lat = record.lat;
        let coordinates: maplibregl.LngLatLike = [lng, lat];
        const mapL = mapC.value;
        mapL.flyTo({
          center: coordinates, // 中心点
          zoom: 14, // 缩放比例
        });
        clickPopUpOk({});
        houseApi(record).then((resp: any) => {
          console.log('record2222',record);
          const e: any = {
            lngLat: coordinates,
            features: [
              {
                properties: record,
                geometry: JSON.parse(resp.geometry),
              },
            ],
          };

          popupInfo(e);
        });
      }
      function locMap(houseId) {
        mapC.value.resize();
        houseApi({ id: houseId })
          .then((record) => {

            console.log('record11111',record);
            
            // let lng = (record.boundingBox.xMin + record.boundingBox.xMax) / 2;
            // let lat = (record.boundingBox.yMin + record.boundingBox.yMax) / 2;

            let lng = record.lng;
            let lat = record.lat;

            if(lng==0)
            {
              console.log('房屋无坐标',lng);
            }
            else
            {
              let coordinates: maplibregl.LngLatLike = [lng, lat];
              const mapL = mapC.value;
              mapL.flyTo({
                center: coordinates, // 中心点
                zoom: 24, // 缩放比例
              });
          }
          })
          .catch((err) => {
            error(err.message || '获取房屋信息失败');
          });
      }
      function locMapxy(coordinates,cj) {
        mapC.value.resize();
        console.log("定位",cj);
        
        const mapL = mapC.value;
              mapL.flyTo({
                center: coordinates, // 中心点
                zoom: cj, // 缩放比例
              });
      }
      const getFormProps = computed((): Partial<FormProps> => {
        return {
          showAdvancedButton: false,
          compact: true,
          actionColOptions: { span: 6 },
          schemas: cloneSearchSchema(serSchema),
        };
      });

      function handleSearchInfoChange(info: Recordable) {
        // 获取表单数据
        const formData = formActions.getFieldsValue();
        const selectedParam = formData.paramName;
        console.log('查询的点击事件', info);

        // // 假设我们要根据某种搜索条件筛选房屋数据
        // const searchParams = formData.paramName; // 这里的paramName是示例，实际应根据你的表单字段来获取
        // console.log('查询的点击事件', info);

        // console.log('1111', params);

        // loading.value = true;
        // let res: any = await houseListApi(params);

        // 异步获取符合条件的房屋数据
        // houseListApi(params)
        //   .then((res) => {
        //     // 将获取到的数据转换为GeoJSON格式
        //     // console.log('@返回数据', res.items);

        //     if (res || res.items.length > 0) {
        //       data.tableData = [...res.items];

        //       data.tableData = [...res.items];
        //       total.value = res.total;
        //       console.log('@返回数据data', data);
        //       console.log('@返回数据 data.tableData', tableData);
        //     }

        //     // const geojsonData = convertToGeoJSON(response.data);

        //     // // 获取mapbox的map实例
        //     // const map = mapC.value;

        //     // // 假设'allHouses'是我们想要填充数据的图层的ID
        //     // if (map.getSource('buz')) {
        //     //   // 更新数据源
        //     //   map.getSource('buz').setData(geojsonData);
        //     // } else {
        //     //   // 如果数据源不存在，则添加数据源和图层
        //     //   map.addSource('buz', {
        //     //     type: 'geojson',
        //     //     data: geojsonData
        //     //   });

        //     //   map.addLayer({
        //     //     id: 'allHouses', // 确保这个id与上面使用的数据源id一致
        //     //     type: 'fill',
        //     //     source: 'buz',
        //     //     // ... 其他图层样式设置
        //     //   });
        //     // }
        //   })
        //   .catch((error) => {
        //     console.error('搜索房屋失败:', error);
        //   });
      }

      const [registerForm, formActions] = useForm();
      const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
        const keys = Object.keys(slots);
        return keys
          .map((item) => (item.startsWith('form-') ? item : null))
          .filter((item) => !!item) as string[];
      });
      function replaceFormSlotKey(key: string) {
        if (!key) return '';
        return key?.replace?.(/form\-/, '') ?? '';
      }
      const showDrawer = () => {
        searchVisible.value = true;
      };

      function updateStatLayerSource() {
        // debugger;
        console.log("enablepczthc.value",enablepczthc.value);
        
        checkXXXLayer(`pcztjc`,'pcztjc-point','bjCenterMapjc','qxCenterMapjc','jiedao_centerjc', enablepczthc.value);
        checkXXXLayer(`pcztzc`,'pcztzc-point','bjCenterMapzc','qxCenterMapzc','jiedao_centerzc', enablepcztzc.value);
        checkXXXLayer('pcztzc','pcztzc-point','bjCenterMaphb','qxCenterMaphb','jiedao_centerhb', enablepcztHb.value);



        updateStatSource(0, 'RegionId', 'bjCenterMap', bj_center, () => true);

        updateStatSource(
          1,
          'RegionId',
          'qxCenterMap',
          qx_center,
          (item, eleValue) => item.code === eleValue,
        );
        updateStatSource(
          2,
          'PAC',
          'jiedao_center',
          jiedao_center,
          (item, eleValue) => item.code.substring(0, 9) === eleValue,
        );
      }

      function checkZcLayer(cv) {
        enablepcztzc.value = !enablepcztzc.value;
        updateStatLayerSource();
      }
      function checkHcLayer(cv) {
        enablepczthc.value = !enablepczthc.value;
        updateStatLayerSource();
      }
      function checkDcLayer(cv) {
        enablepcztHb.value = !enablepcztHb.value;
        updateStatLayerSource();
      }

      function checkJcLayerfw(cv) {
        enablepcztjcfw.value = !enablepcztjcfw.value;
        updateStatLayerSource();
      }
      function checkZcLayerfw(cv) {
        enablepcztzcfw.value = !enablepcztzcfw.value;
        updateStatLayerSource();
      }


        // 切换页码的时候更新  pageIndex 和  pageSize
  const onShowSizeChange = (pageIndex: number, pageSize: number) => {
   // antDesign  自动给  pageIndex 和 pageSize 赋值
    pageIndex.value = pageIndex;
    pageSize.value = pageSize;
    console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };


  watch(pageSize, () => {
  console.log('pageSize', pageSize.value);
  getData();
});
watch(pageIndex, () => {
  console.log('current', pageIndex.value);
  getData();
});

      return {
//         detailData,
// detailParams,
// detailTableHeight,
// tableHeight,
        onShowSizeChange,
        getxzqcode,
        total,
        pageIndex,
        pageSize,
        txtKeyWord,
        fwzt,
        zczt,
        jczt,
        zc_yhzt,
        jc_yhzt,
        getData,
        searchBtn,
        options1,
        data,
        columns,
        tableData,
        // displayColumns,
        // datalist,
        checkZcLayer,
        checkHcLayer,
        checkDcLayer,
        checkZcLayerfw,
        checkJcLayerfw,
        imgList,
        activeKeyRef,
        activePickKeyRef,
        activeMapPickKeyRef,
        registerForm,
        getFormSlotKeys,
        replaceFormSlotKey,
        getFormProps,
        handleSearchInfoChange,
        registerTable,
        handleLocMap,
        handleStatus,
        handleReloadCurrent,
        handleReload,
        locMap,
        locMapxy,
        registerModal,
        handleSuccess,
        searchVisible,
        showDrawer,
        register5,
        pickedHouse,
        pickedHouseId,
        houseFirePlaceRef,
        housePolicePlaceRef,
        onBack2Map,
        findCoordinatesByRegionId,
      };
    },
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .x-houseMng-search {
    z-index: 100;

    top: 9px;
    left:220px;
    position: absolute;
  }
  .statMapLayers {
    position: absolute; /* 绝对定位 */
    z-index: 101; /* 层级比 .x-houseMng-search 高，以覆盖在上方 */
    background: #e6e6e6; /* 浅灰色背景 */
    opacity: 1; /* 不透明 */
    top: 9px;
    left:15px;
    
  }
  .root-house-mng-main {
    margin: 6px;
  }
  .marker {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 62px 20px -14px #434141;
    border: 4px solid #fff;
    object-fit: cover;
  }
  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }

  .changeView {
    width: 29px;
    height: 29px;
    padding: 5px;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  .changeView:hover {
    opacity: 0.8;
  }
</style>
